// in _settings.scss there are all variables used here
@import 'settings';

.post-view-menu-bars {
    position: fixed;
    top: rem-calc(30);
    width: rem-calc(50);
    height: rem-calc(50);
    font-size: rem-calc(36);
    right: rem-calc(35);
    vertical-align: middle;
    line-height: rem-calc(50);
    text-align: center;
    z-index: 10;
    color: $color-main-dark;
    cursor: pointer;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    display: none;
    @media only screen and (min-width: 64em) {
        display: block;
    }
}
.post-view-menu-bars-mobile {
    height: rem-calc(120);
    line-height: rem-calc(120);
    width: rem-calc(50);
    font-size: rem-calc(36);
    vertical-align: middle;
    text-align: center;
    color: $color-main-light;
    cursor: pointer;
    float: right;
    display: block;
    @media only screen and (min-width: 64em) {
        display: none;
    }
}

.post-view {
    width: 100%;
    .post-view-sidebar {
        width: 100%;
        height: rem-calc(120);
        float: none;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-color: $color-main-dark;
        position: relative;
        @media only screen and (min-width: 64em) {
            width: rem-calc(280);
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            float: left;
        }
        @media only screen and (min-width: 90.063em) {
            width: rem-calc(360);
        }
        .post-view-elems {
            padding: 0 rem-calc(15);
            height: 100%;
            background-color: rgba($color-main-dark, .8);
            .post-view-elems-header {
                padding-top: 0;
                line-height: rem-calc(120);
                height: rem-calc(120);
                .blog-logo {
                    svg {
                        width: rem-calc(80);
                        height: rem-calc(80);
                        border-radius: rem-calc(6);
                        vertical-align:middle;
                    }
                }
                @media only screen and (min-width: 64em) {
                    padding-top: rem-calc(15);
                    line-height: 1.1;
                    height: auto;
                }
                @media only screen and (min-width: 64em) and (min-height: rem-calc(720)) {
                    padding-top: rem-calc(40);
                    .blog-logo {
                        display: block;
                        text-align: center;
                        svg {
                            width: rem-calc(150);
                            height: rem-calc(150);
                            border-radius: rem-calc(10);
                        }
                    }
                }
            }
            .post-view-elems-body {
                margin-top: rem-calc(40);
                .post-reading-time {
                    position: relative;
                    background-color: rgba($color-main-light, .15);
                    height: rem-calc(80);
                    overflow-y: hidden;
                    margin-top: rem-calc(30);
                    margin-bottom: rem-calc(30);
                    .read-estimation {
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 1050;
                        color: $color-main-light;
                        padding: rem-calc(15);
                        height: rem-calc(80);
                        vertical-align: middle;
                        display: table;
                        .read-estimation-content {
                            display: table-cell;
                            background-color: transparent;
                            vertical-align: middle;
                            margin-bottom: 0;
                            .title {
                                font-weight: 600;
                                font-family: $headers-font;
                                line-height: 1.1;
                                font-size: rem-calc(14);
                                text-transform: uppercase;
                            }
                            .estimated-time {
                                font-weight: 300;
                                font-size: rem-calc(14);
                            }
                        }
                    }

                    // based on : 'Reading Position Indicator' article
                    // http://css-tricks.com/reading-position-indicator/

                    .read-progress-indicator {
                        width: 100%;
                        height: rem-calc(80);
                        -webkit-appearance: none;
                        -moz-appearance: none;
                        appearance: none;
                        border: none;
                        background-color: transparent;
                        color: darken($color-main-light, 20%);
                        &::-webkit-progress-bar {
                            background-color: transparent;
                        }
                        &.single {
                            &::-webkit-progress-value {
                                background-color: rgba($color-main-light, .15);
                            }
                            &::-moz-progress-bar {
                                background-color: rgba(#6E6C72, .5);
                            }
                        }
                    }
                    .progress-container {
                        width: 100%;
                        background-color: transparent;
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: rem-calc(80);
                        display: block;
                        -webkit-transform: translateZ(0);
                        transform: translateZ(0);
                        overflow-x: hidden;
                        .progress-bar {
                            background-color: rgba($color-main-light, .2);
                            width: 100%;
                            height: 100%;
                            display: block;
                        }
                    }
                    display: none;
                    @media only screen and (min-width: 64em) {
                        display: block;
                    }
                    @media only screen and (max-height: rem-calc(720)) {
                        margin-top: rem-calc(22);
                        margin-bottom: rem-calc(15);
                    }
                }
                .post-view-elems-share {
                    padding: rem-calc(10) rem-calc(10) rem-calc(30);
                    a {
                        color: $color-main-dark;
                        font-size: rem-calc(16);
                        margin-right: rem-calc(4);
                        @include social-icons;
                    }
                    display: none;
                    @media only screen and (min-width: 64em) {
                        display: block;
                    }
                    @media only screen and (max-height: rem-calc(720)) {
                        padding-bottom: rem-calc(20);
                    }
                }
                .post-recent-list {
                    padding: 0 rem-calc(10) rem-calc(20);
                    .post-recent-list-label {
                        font-size: rem-calc(18);
                        color: $color-main-light;
                        font-weight: 900;
                        text-transform: uppercase;
                    }
                    .post-recent-list-separator {
                        width: 30%;
                        height: rem-calc(2);
                        background-color: $color-main-light;
                        margin-bottom: rem-calc(15);
                    }
                    ul {
                        list-style-type: none;
                        margin: 0;
                        padding: 0;
                        li {
                            line-height: 1.2;
                            padding: rem-calc(5) 0;
                            a {
                                font-weight: 400;
                                color: $color-main-light;
                                display: inline-block;
                                -webkit-transition: color .3s;
                                transition: color .3s;
                                &:hover, &:focus, &:active {
                                    color: darken($color-main-light, 40%);
                                    text-decoration: none;
                                }
                            }
                        }
                    }
                    display: none;
                    @media only screen and (min-width: 64em) {
                        display: block;
                    }
                }
                @media only screen and (max-height: rem-calc(720)) {
                    margin-top: 0;
                }
            }
        }

        .flagcounter {
            margin-top: rem-calc(5);
            @media only screen and (min-width: 64em) and (min-height: rem-calc(720)) {
                margin-top: rem-calc(30);
                a {
                    display: block;
                    text-align: center;
                }
            }
            @media only screen and (max-width: 64em) {
                img {
                    width: 2px;
                    height: 2px;
                    position: absolute;
                    top: 2px;
                    left: 2px;
                }
            }
        }
    }
    .post-view-content {
        min-height: 100%;
        @media only screen and (min-width: 64em) {
            padding-left: rem-calc(280);
        }
        @media only screen and (min-width: 90.063em) {
            padding-left: rem-calc(360);
        }
        .post-view-right-container {
            background-color: $color-main-light;
            min-height: 100%;
            .post-view-article {
                .post-article-content {
                    p a,
                    ul a {
                        color: $color-main-contrast;
                        position: relative;
                        display: inline-block;
                        &.button {
                            text-decoration: none;
                            color: $color-main-light;
                            &:hover, &:active, &:focus {
                                text-decoration: none;
                                color: $color-main-light;
                            }
                            &:after {
                                display: none;
                            }
                        }
                    }
                    p {
                        hyphens: auto;
                        &.notice {
                            background: darken($color-main-light, 3%);
                            border-radius: rem-calc(5);
                            padding: rem-calc(10) rem-calc(20);
                            text-align: right;
                        }
                    }
                    a {
                        @include corner-link;
                    }
                    table {
                        display: block;
                        overflow: auto;
                    }
                    .comment-header a {
                        &:hover, &:focus, &:active {
                            color: darken($color-comment-header-link, 5%);
                        }
                    }
                }
                .post-header-content {
                    margin-bottom: rem-calc(60);
                    .post-title {
                        font-size: rem-calc(36);
                        line-height: 1.1;
                        @media only screen and (min-width: 30em) {
                            font-size: rem-calc(42);
                        }
                        @media only screen and (min-width: 48em) {
                            font-size: rem-calc(48);
                        }
                        @media only screen and (min-width: 64em) {
                            font-size: rem-calc(60);
                        }
                        @media only screen and (min-width: 90.063em) {
                            font-size: rem-calc(72);
                        }
                    }
                    .post-title-separator {
                        height: rem-calc(5);
                        background-color: $color-main-dark;
                        width: rem-calc(200);
                        margin-top: rem-calc(20);
                        margin-bottom: rem-calc(20);
                    }
                    .post-meta {
                        font-weight: 600;
                        .post-created-at {
                            float: left;
                            @media only screen and (max-width: 40.0625em) {
                                float: none;
                            }
                        }
                        .post-views-cnt {
                            float: right;
                            font-weight: 200;
                            .glyphicon {
                                color: lighten($color-main-dark, 50%);
                            }
                            @media only screen and (max-width: 40.0625em) {
                                float: none;
                                margin: 0.25rem 0 1.25rem;
                            }
                        }
                    }
                }
                width: 100%;
                max-width: rem-calc(920);
                padding: rem-calc(60) 0;
                @media only screen and (min-width: 48em) {
                    padding: rem-calc(100) rem-calc(60) rem-calc(60);
                }
                @media only screen and (min-width: 90.063em) {
                    max-width: rem-calc(1020);
                    padding: rem-calc(100);
                }
                @media only screen and (min-width: 100em) {
                    max-width: rem-calc(1124);
                }
                @media only screen and (max-width: 48em) {
                    .post-content.row:not(.statistic-row) {
                        .column, .columns {
                            padding-left: rem-calc(15);
                            padding-right: rem-calc(15);

                        }
                    }
                }
                @include flash-messages;
            }
        }
    }
}

html[data-useragent*='MSIE 9.0'] .post-view .post-view-sidebar .post-view-elems .post-view-elems-body .post-view-elems-share a .icon svg {
    width: 2em;
}

// post view tags list
.post-tags {
    margin-top: rem-calc(30);
    padding-top: rem-calc(30);
    border-top: rem-calc(1) solid lighten($color-main-dark, 75%);
    a {
        @include green-button;
    }
}

.statistic-row h2 {
    font-size: 1.6875rem;
}

// author info box in post view page
.author-info {
    position: relative;
    padding: rem-calc(60) 0;
    margin: rem-calc(60) rem-calc(15) rem-calc(40);
    background: darken($color-main-light, 3%);
    border-radius: rem-calc(5);
    .post-author {
        padding: 0 rem-calc(30);
        text-align: center;
        .author-label {
            display: block;
            font-size: rem-calc(16);
            color: lighten($color-main-dark, 50%);
            font-style: italic;
        }
        .author-link-name {
            color: $color-main-dark;
            -webkit-transition: color .3s;
            transition: color .3s;
            &:active, &:hover, &:focus {
                color: $color-main-contrast;
            }
        }
        .author-website {
            font-size: rem-calc(16);
        }
        h2 {
            margin: 0;
            padding: 0;
            font-family: $headers-font;
            font-weight: 900;
            text-transform: uppercase;
            font-size: rem-calc(30);
        }
        > p {
            font-size: rem-calc(18);
            margin-bottom: 0.5rem;
            a {
                color: $color-main-contrast;
                font-weight: 400;
                @include corner-link;
            }
        }
        .post-author-avatar {
            width: rem-calc(200);
            height: rem-calc(200);
            border-radius: rem-calc(6);
            float: none;
            margin-right: 0;
            margin-bottom: rem-calc(20);
            @media only screen and (min-width: 40.063em) {
                margin-right: rem-calc(50);
                margin-bottom: 0;
                float: left;
            }
        }
        a {
            text-decoration: none;
        }
        @media only screen and (min-width: 40.063em) {
            text-align: left;
        }
        .adr {
            font-size: rem-calc(14);
        }
        &.vcard {
            border: none;
            display: block;
            margin: 0;
            .fn {
                font-weight: inherit;
                font-size: inherit;
            }
        }
    }
}

// prev next posts

.prev-next-post {
    margin-bottom: rem-calc(40);
    margin-top: rem-calc(40);
    .prev-block,
    .next-block {
        position: relative;
        overflow: hidden;
        background-position: 50% 50%;
        background-size: cover;
        background-repeat: no-repeat;
        .description {
            padding: rem-calc(60) rem-calc(16);
            text-align: center;
            color: $color-main-light;
            border: rem-calc(20) solid transparent;
            -webkit-transition: border .5s;
            transition: border .5s;
            min-height: 100%;
            &:before {
                content: " ";
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                -webkit-transition: background .5s;
                transition: background .5s;
                background-color: rgba($color-main-dark, .3);
                z-index: 2;
            }
            &:hover {
                border: rem-calc(20) solid rgba($color-main-light, .4);
                &:before {
                    background-color: rgba($color-main-dark, .5);
                }
                .prev-next-label {
                    background-color: $color-main-light;
                    color: $color-main-dark;
                }
            }
            .prev-next-label,
            .post-title {
                position: relative;
                display: block;
                z-index: 3;
            }
            .prev-next-label {
                display: inline-block;
                padding: rem-calc(5) rem-calc(10);
                border: rem-calc(1) solid rgba($color-main-light, .8);
                text-transform: uppercase;
                margin-bottom: rem-calc(15);
                font-size: rem-calc(12);
                border-radius: rem-calc(3);
                -webkit-transition: all .5s;
                transition: all .5s;
            }
            .post-title {
                font-family: $headers-font;
                font-size: rem-calc(28);
                line-height: 1;
            }
        }
    }
    .prev-next-block-link {
        color: $color-main-light;
        &:hover, &:active, &:focus {
            color: $color-main-light;
            text-decoration: none;
        }
    }
    .prev-block {
        float: left;
    }
    .next-block {
        float: right;
    }
    .prev-block,
    .next-block {
        width: 100%;
        margin-bottom: rem-calc(10);
        @media only screen and (min-width: 48em) {
            width: 49%;
            margin-bottom: 0;
        }
    }
}
